<template>
	<div>
		<div class="q-style-answer q-error-answer">
			<span class="q-style-type">【答案】</span>
			<ve-parse class="q-style-text" :article="answer" />
		</div>
		<div class="q-style-analysis q-error-analysis">
			<span class="q-style-type">【解析】</span>
			<ve-parse class="q-style-text" :article="analysis" />
		</div>
		<div v-if="questionKeywords" class="q-error-analysis">
			<span class="q-style-type">【阅卷关键词】</span>
			<span>{{ questionKeywords }}</span>
		</div>
		<div v-if="questionScoreWeight" class="q-error-analysis">
			<span class="q-style-type">【关键词得分权重】</span>
			<span>{{ questionScoreWeight }}</span>
		</div>
		<div v-if="listHasData(videoList)" class="q-error-analysis">
			<div class="q-style-type">【视频解析】</div>
			<template v-for="(item, index) in videoList">
				<div v-show="item" :key="index" class="item-box video">
					<polyv-video
						:options="{
							autoplay: false,
							vid: item
						}"
					/>
				</div>
			</template>
		</div>
		<div v-if="listHasData(parseAudioList)" class="q-error-analysis">
			<div class="q-style-type">【音频解析】</div>
			<template v-for="(item, index) in parseAudioList">
				<div v-show="item" :key="index" class="item-box">
					<ve-audio :src="item" />
				</div>
			</template>
		</div>
	</div>
</template>

<script>
	import PolyvVideo from "../../polyv-video.vue";
	export default {
		props: {
			// html格式的答案
			answer: {
				type: String,
				default: ""
			},
			// html格式的文本解析
			analysis: {
				type: String,
				default: ""
			},
			// 简答题阅卷关键词
			questionKeywords: {
				type: String,
				default: ""
			},
			// 	简答题关键词得分权重
			questionScoreWeight: {
				type: String,
				default: ""
			},
			// 视频解析文件列表
			videoList: {
				type: Array,
				default: () => []
			},
			// 音频解析文件列表
			audioList: {
				type: Array,
				default: () => []
			},
		},
		components: { PolyvVideo },
		computed: {
			parseAudioList() {
				return this.audioList.map((i) => {
					if (!i) {
						return "";
					}
					if (/^https?:\/\//.test(i)) {
						return i;
					}
					return UrlUtil.getViewUrl(i);
				});
			},
			// 判断列表中是否存在有数据的元素
			listHasData() {
				return (list) => {
					return list.some((i) => Boolean(i));
				};
			},
		}
	};
</script>

<style lang="less" scoped>
	.item-box {
		margin: 10px 0;
		&.video {
			height: 200px;
			max-width: 400px;
		}
	}
</style>
